<template>
  <div class="loginReg">
    <div class="login-tab">
      <ul>
        <li @click="num = 0" :class="{ active: num == 0 }">登录</li>
        <li @click="num = 1" :class="{ active: num == 1 }">注册</li>
      </ul>
    </div>
    <div class="content">
      <div class="login" v-show="num == 0">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="75px"
          class="demo-ruleForm"
        >
          <el-form-item prop="user">
            <el-input
              v-model="ruleForm.user"
              autocomplete="off"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
              placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="register">
            <div class="register">
              <el-input
                class="registerInput"
                v-model="ruleForm.register"
                placeholder="验证码"
              ></el-input>
              <el-button
                class="getPassword"
                @click="get_verification"
                :disabled="ioncode"
                >{{ Obtain == "" ? "获取验证码" : `${Obtain} 秒后在试` }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="register" v-show="num == 1">
        <el-form
          :model="ruleForm1"
          status-icon
          :rules="rules"
          ref="ruleForm1"
          label-width="75px"
          class="demo-ruleForm"
        >
          <el-form-item prop="user">
            <el-input
              v-model="ruleForm1.user"
              autocomplete="off"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pass1">
            <el-input
              type="password"
              v-model="ruleForm1.pass"
              autocomplete="off"
              placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkPass1">
            <el-input
              type="password"
              v-model="ruleForm1.checkPass"
              autocomplete="off"
              placeholder="确认密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="register">
            <div class="register1">
              <el-input
                class="registerInput"
                v-model.number="ruleForm1.register"
                placeholder="验证码"
              ></el-input>
              <el-button
                class="getPassword"
                @click="get_verification1"
                :disabled="ioncode1"
                >{{ Obtain1 == "" ? "获取验证码" : `${Obtain1} 秒后在试` }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm1('ruleForm1')"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import sha1 from "js-sha1"
  import { setToken, setUsername } from "../../untils/cookie"
  import { GetSms, Login, Register } from "../../api/index"
  export default {
    name: "Login",
    data() {
      let validateCode = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("验证码不可为空"))
        } else {
          if (value !== "") {
            let reg = /^[a-z0-9]{6}$/
            if (!reg.test(value)) {
              callback(new Error("请输入有效的验证码"))
            }
          }
          callback()
        }
      }
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"))
        } else {
          if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass")
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"))
        } else if (value !== this.ruleForm.pass) {
          callback(new Error("两次输入密码不一致!"))
        } else {
          callback()
        }
      }
      return {
        num: 0,
        Obtain: "", // 获取验证码倒计时
        timer: null,
        ioncode: false, // 禁用倒计时按妞
        Obtain1: "", // 获取验证码倒计时
        timer1: null,
        ioncode1: false, // 禁用倒计时按妞

        ruleForm: {
          user: "2236001007@qq.com",
          pass: "songbai0377",
          checkPass: "",
          register: "",
        },
        ruleForm1: {
          user: "",
          pass: "",
          checkPass: "",
          register: "",
        },
        rules: {
          pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
          pass1: [{ validator: validatePass, trigger: "blur" }],
          checkPass1: [{ validator: validatePass, trigger: "blur" }],
          register: [{ validator: validateCode, trigger: "blur" }],
          user: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        },
      }
    },
    methods: {
      // 登录
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert("submit!")
            this.login()
          } else {
            console.log("error submit!!")
            return false
          }
        })
      },
      // 注册
      submitForm1(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert("submit!")
            this.register()
          } else {
            console.log("error submit!!")
            return false
          }
        })
      },
      // 获取验证码接口
      getPassword() {
        // 验证码倒计时
        let requestData = {
          username: this.ruleForm.user,
          module: "register",
        }
        GetSms(requestData)
          .then((response) => {
            // console.log(response.data)
            let res = response.data
            this.$message({
              message: res.message,
              type: "success",
            })
          })
          .catch(() => {
            // 失败时执行的代码
          })
      },
      // 获取验证码接口
      getPassword1() {
        // 验证码倒计时
        let requestData = {
          username: this.ruleForm1.user,
          module: "register",
        }
        GetSms(requestData)
          .then((response) => {
            // console.log(response.data)
            let res = response.data
            this.$message({
              message: res.message,
              type: "success",
            })
          })
          .catch(() => {
            // 失败时执行的代码
          })
      },
      // 点击获取验证码
      get_verification() {
        this.getPassword()
        const TIME_COUNT = 60
        if (!this.timer) {
          this.Obtain = TIME_COUNT
          this.ioncode = true
          this.timer = setInterval(() => {
            if (this.Obtain > 0 && this.Obtain <= TIME_COUNT) {
              this.Obtain--
            } else {
              this.ioncode = false
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
      },
      // 点击获取验证码
      get_verification1() {
        this.getPassword1()
        const TIME_COUNT = 60
        if (!this.timer1) {
          this.Obtain = TIME_COUNT
          this.ioncode1 = true
          this.timer1 = setInterval(() => {
            if (this.Obtain1 > 0 && this.Obtain1 <= TIME_COUNT) {
              this.Obtain1--
            } else {
              this.ioncode1 = false
              clearInterval(this.timer1)
              this.timer1 = null
            }
          }, 1000)
        }
      },
      // 登录接口
      login() {
        let requestData = {
          username: this.ruleForm.user,
          password: this.ruleForm.pass,
          code: this.ruleForm.register,
        }
        Login(requestData)
          .then((response) => {
            let res = response.data
            // console.log(res.data)
            setToken(res.data.token)
            setUsername(res.data.username)
            this.$message({
              message: res.message,
              type: "success",
            })
            this.$router.push({ name: "ConsoleIndex" })
          })
          .catch(() => {
            // 失败时执行的代码
            this.$message({
              message: "登录失败",
              type: "error",
            })
          })
      },
      // 注册接口
      register() {
        let requestData = {
          username: this.ruleForm1.user,
          password: sha1(this.ruleForm1.pass),
          code: this.ruleForm1.register,
        }
        Register(requestData)
          .then((response) => {
            // console.log(response.data)
            let res = response.data
            this.$message({
              message: res.message,
              type: "success",
            })
          })
          .catch(() => {
            // 失败时执行的代码
            this.$message({
              message: "注册失败!",
              type: "error",
            })
          })
      },
    },
  }
</script>
<style lang='scss'>
  @import "./login.scss";
</style>s